<template>
    <div>
      <h1>房号列表</h1>
      <table class="table table-bordered">
        <tbody>
            <tr>
                <td>
                    <input type="checkbox" v-model="all" @click="All"/>
                </td>
                <td>Id</td>
                <td>房型名称</td>
                <td>房号</td>
                <td>备注</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>
                    <input type="checkbox" :value="item.numberId" v-model="one" @change="One"/>
                </td>
                <td>{{item.numberId}}</td>
                <td>{{item.typeName}}</td>
                <td>{{item.hoomNumber}}</td>
                <td>{{item.desc}}</td>
                <td>{{item.state==0?"上架":"下架"}}</td>
                <td>
                    <input type="button" value="修改" class="btn btn-warning" @click="update(item.numberId)"/>
                </td>
            </tr>
        </tbody>
     </table>
     <input type="button" value="批量上架" class="btn btn-info" @click="UpdateState(0)"/>
     <input type="button" value="批量下架" class="btn btn-success" @click="UpdateState(1)"/>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const router=useRouter();
const route=useRoute();

let list:any=ref([])

onMounted(()=>{
    showlist();
})
//显示房号信息
const showlist=()=>
{
    axios
    ({
        url:'/api/Number/ShowNumber',
        method:'get'
    })
    .then(res=>{
        list.value=res.data;
    })
    .catch(err=>{

    })
}

//修改
const update=(id:any)=>
{
    router.push
    ({
        path:'/numberUpdate',
        query:
        {
            id:id
        }
    })
}

let all=ref(false)
let one=ref([])

const All=()=>
{
    all.value=!all.value;
    if(all.value==true)
    {
        one.value=list.value.map((item:any)=>{
            return item.numberId;
        })
    }
    else
    {
        one.value=[];
    }
}

const One=()=>
{
    if(one.value.length==list.value.length)
    {
        all.value=true;
    }
    else
    {
        all.value=false;
    }
}


//批量修改状态
const UpdateState=(state:any)=>
{
    if(one.value.length==0)
    {
        alert("必须选择一项");
        return;
    }
    let f=confirm("确认修改吗?")
    {
        if(f)
        {
            axios
            ({
                url:'/api/Number/AllUpdateState',
                method:'put',
                params:
                {
                    ids:one.value.toString(),
                    state:state
                }
            })
            .then(res=>{
                if(res.data>0)
                {
                    alert("修改成功");
                    all.value=false;
                    one.value=[];
                    showlist();
                    return;
                }
                else
                {
                    alert("修改失败");
                    all.value=false;
                    one.value=[];
                    return;
                }
            })
            .catch(err=>{
        
            })
        }
    }
}


</script>

<style scoped>
input
{
    margin: 0 10px;
}
</style>